<template>
    <view class="page">
        <view class="pa-20 flex align-center justify-center">
            <image src="@/assets/img/logo.png" class="logo"></image>
            <view class="pl-20 text-15" v-if="version">VSN {{ version }}</view>
        </view>
        <!-- #ifndef APP -->
        <view class="pb-16 flex align-center justify-center" v-if="iosPayFlag">
            <view class="mr-10" v-if="userInfo.expired">权益时长：{{ userInfo.expired }}</view>
            <view>
                <my-button type="primary" shape="circle" width="180rpx" height="60rpx" :size="26"
                    @click="routerPush('/pages/my/pay?flag=1')">购买权益</my-button>
                <!-- <my-button v-else type="primary" shape="circle" width="180rpx" height="60rpx" :size="26"
                    @click="toast('由于相关规范，iOS功能暂不可用')">iOS暂不可用</my-button> -->
            </view>
        </view>
        <!-- #endif -->
        <view class="pt-20 text-14">
            <button class="menu-btn" @click="routerPush('/pages/my/order')">
                <view class="px-10 flex justify-between align-center border-bottom w-100">
                    <view>我的订单</view>
                    <uni-icons type="right" :size="24" color="#bbb"></uni-icons>
                </view>
            </button>
            <button class="menu-btn" @click="routerPush('/pages/my/collect')">
                <view class="px-10 flex justify-between align-center border-bottom w-100">
                    <view>我的收藏</view>
                    <uni-icons type="right" :size="24" color="#bbb"></uni-icons>
                </view>
            </button>
            <button class="menu-btn" @click="routerPush('/pages/feedback/feedback')">
                <view class="px-10 flex justify-between align-center border-bottom w-100">
                    <view>意见反馈</view>
                    <uni-icons type="right" :size="24" color="#bbb"></uni-icons>
                </view>
            </button>
            <!-- #ifndef APP -->
            <button class="menu-btn" open-type="share">
                <view class="px-10 flex justify-between align-center border-bottom w-100">
                    <view>分享给好友</view>
                    <uni-icons type="right" :size="24" color="#bbb"></uni-icons>
                </view>
            </button>
            <!-- #endif -->
            <button class="menu-btn" @click="handleDelTranslateHistory">
                <view class="px-10 flex justify-between align-center border-bottom w-100">
                    <view>清空翻译记录</view>
                    <uni-icons type="right" :size="24" color="#bbb"></uni-icons>
                </view>
            </button>
            <!-- #ifdef APP -->
            <button class="menu-btn" @click="logout">
                <view class="px-10 flex justify-between align-center border-bottom w-100">
                    <view>退出登录</view>
                    <uni-icons type="right" :size="24" color="#bbb"></uni-icons>
                </view>
            </button>
            <!-- #endif -->
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
import { toast, routerPush, delStorage } from '@/assets/js/utils';
import { getPayParam } from '@/api/order';
import { delTranslateHistory } from '@/api/translate';
import { getUserInfo } from '@/api/login';
import { useIosPay } from "@/hooks/useIosPay";
import { config } from '@/assets/js/config';

const version = ref('');
// #ifdef MP-WEIXIN
version.value = uni.getAccountInfoSync().miniProgram.version;
// #endif
const { iosPayFlag, getIosPayFlag } = useIosPay();
onShow(async () => {
    handleGetUserInfo();
    await getIosPayFlag();
});

//获取当前用户信息
const userInfo: any = ref([]);
const handleGetUserInfo = async () => {
    let [result, err] = await getUserInfo();
    if (result) {
        userInfo.value = result;
    }
};
//支付
const handleGetPayParam = async () => {
    uni.showLoading({
        title: '支付中',
        mask: true
    });
    let [result, err] = await getPayParam({ rightsId: 1 });
    if (result && result.payJsapiDTO) {
        // #ifdef MP-WEIXIN
        wx.requestPayment({
            timeStamp: result.payJsapiDTO.timeStamp,
            nonceStr: result.payJsapiDTO.nonceStr,
            package: result.payJsapiDTO.packageExt,
            signType: result.payJsapiDTO.signType,
            paySign: result.payJsapiDTO.paySign,
            success(res: any) {
                toast('支付成功');
                handleGetUserInfo();
            },
            fail(err: any) {
                uni.hideLoading();
                console.log(err);
            }
        });
        // #endif
        // #ifndef MP-WEIXIN
        toast('暂不支持当前平台支付');
        // #endif
    }
};

//删除翻译记录
const handleDelTranslateHistory = async () => {
    uni.showModal({
        title: '提示',
        content: '清空翻译记录，无法恢复，是否继续清空？',
        success: async function (res) {
            if (res.confirm) {
                let [result, err] = await delTranslateHistory();
                if (result) {
                    uni.$emit('refreshTranslateHistoryList');
                    toast('清空成功');
                }
            }
        }
    });
};

//退出登录
const logout = () => {
    uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: async function (res) {
            if (res.confirm) {
                delStorage('token');
                uni.redirectTo({
                    url: '/pages/index/index'
                });
            }
        }
    });
}

//分享相关
onShareAppMessage(() => {
    return {
        title: `专业${config.targetLangZh}语翻译，语音翻译，旅行、工作必备工具`,
        path: `/pages/index/index`,
        imageUrl: '/static/img/share.jpg'
    };
});
</script>
<style lang="scss" scoped>
.logo {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
}

.menu-btn {
    height: 100rpx;
    display: flex;
    font-size: 28rpx;
    background: transparent;
    padding: 0;
}

.menu-btn::after {
    border: 0;
}
</style>
